<template>
	<view>
		<view class="content">
			<view class="login_box">
				<message-edit :showclear="showclear" type="1" @changeMsg1="changeMsg1" @changeMsg2="changeMsg2"
					:showinput="showinput"></message-edit>
				<view class="login_btn1" v-if="showclear==true&&showinput==true" @click="goNext">下一步</view>
				<view class="login_btn" v-else>下一步</view>
			</view>
		</view>
	</view>
</template>

<script>
	import messageedit from '@/pages/personal/message-edit.vue'
	export default {
		components: {
			"messageEdit": messageedit
		},
		data() {
			return {
				showclear: false,
				showinput: false,
				mobile: '',
				code: ''
			}
		},
		methods: {
			//下一步
			goNext() {
				uni.navigateTo({
					url: '/pages/personal/editPhoneNew?mobile=' + this.mobile + '&code=' + this.code
				})
			},
			//子子组件触发
			changeMsg1(el) {
				el != '' ? this.showclear = true : this.showclear = false
			},
			//子子组件触发
			changeMsg2(el) {
				this.mobile = el.mobile
				this.code = el.captcha
				el.captcha != '' ? this.showinput = true : this.showinput = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		background-color: #fff;
		overflow: hidden;

		.login_box {
			width: 100%;
			margin-top: 10%;
			height: 650rpx;

			.login_btn {
				width: 80%;
				height: 88rpx;
				margin: auto;
				background: #ddd;
				border-radius: 10rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 60rpx;
			}

			.login_btn1 {
				width: 80%;
				height: 88rpx;
				margin: auto;
				background: #ffdd47;
				border-radius: 10rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 60rpx;
			}
		}
	}
</style>
